<template>
	<view class="user-reviews-showcase">
		<view class="reviews-list">
			<view
				class="review-item"
				v-for="review in reviews"
				:key="review.id"
				@tap="onReviewTap(review)"
			>
				<view class="user-info">
					<image
						:src="review.userAvatar || '/static/empty/no.jpg'"
						class="user-avatar"
						mode="aspectFill"
					/>
					<view class="user-details">
						<text class="username">{{ review.userName }}</text>
						<view class="rating">
							<cl-icon
								v-for="i in 5"
								:key="i"
								name="star-fill"
								size="12"
								:color="i <= review.rating ? '#ffa502' : '#ddd'"
							></cl-icon>
						</view>
					</view>
				</view>
				<text class="review-content">{{ review.content }}</text>
				<view class="review-images" v-if="review.images && review.images.length > 0">
					<image
						v-for="(img, index) in review.images.slice(0, 3)"
						:key="index"
						:src="img"
						class="review-image"
						mode="aspectFill"
					/>
				</view>
				<text class="review-time">{{ formatTime(review.createTime) }}</text>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { useCool } from "/@/cool";

defineProps<{
	reviews: any[];
}>();

const { router } = useCool();

function onReviewTap(review: any) {
	router.push(`/pages/goods/detail?id=${review.goodsId}`);
}

function formatTime(time: string) {
	const date = new Date(time);
	const now = new Date();
	const diff = now.getTime() - date.getTime();
	const days = Math.floor(diff / (1000 * 60 * 60 * 24));

	if (days === 0) {
		return "今天";
	} else if (days === 1) {
		return "昨天";
	} else if (days < 7) {
		return `${days}天前`;
	} else {
		return date.toLocaleDateString();
	}
}
</script>

<style lang="scss" scoped>
.user-reviews-showcase {
	padding: 0 16rpx;
}

.reviews-list {
	display: flex;
	flex-direction: column;
	gap: 16rpx;
}

.review-item {
	background-color: #ffffff;
	border-radius: 16rpx;
	padding: 24rpx;
	transition: all 0.3s ease;

	&:active {
		transform: scale(0.98);
		background-color: #f8f9ff;
	}
}

.user-info {
	display: flex;
	align-items: center;
	margin-bottom: 16rpx;
}

.user-avatar {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	margin-right: 16rpx;
	background-color: #f5f5f5;
}

.user-details {
	flex: 1;
}

.username {
	font-size: 26rpx;
	color: #333;
	font-weight: 500;
	margin-bottom: 4rpx;
}

.rating {
	display: flex;
	gap: 4rpx;
}

.review-content {
	font-size: 28rpx;
	color: #666;
	line-height: 1.6;
	margin-bottom: 16rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.review-images {
	display: flex;
	gap: 8rpx;
	margin-bottom: 16rpx;
}

.review-image {
	width: 120rpx;
	height: 120rpx;
	border-radius: 8rpx;
	background-color: #f5f5f5;
}

.review-time {
	font-size: 24rpx;
	color: #999;
}
</style> 
